<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="专业的班级点名系统，专为教育机构和教师设计。方便快捷地进行随机点名，支持名单批量导入、状态重置等功能，助力高效课堂管理。">
    <meta name="keywords" content="班级点名系统, 随机点名, 名单导入, 教育管理, 课堂管理, 教学工具">
    <meta name="classification" content="Education, Classroom Management">
    <meta name="language" content="Chinese">
    <meta name="copyright" content="© 2025 DouCY">
    <meta name="author" content="DouCY">
    <meta name="date" content="2025-03-05">
    <meta name="revised" content="2025-03-05">
    <meta name="reviewer" content="DouCY">
    <meta name="last-reviewed" content="2025-03-05">
    <meta name="expires" content="never">
    <meta name="rating" content="General">
    <meta name="distribution" content="Global">
    <meta name="coverage" content="Worldwide">
    <meta name="geographical location" content="China">
    <meta name="target audience" content="Educators, Teachers, School Administrators">
    <meta name="theme-color" content="#ffffff">
    <link rel="icon" href="./assets/images/logo/logo.ico" type="image/x-icon">
    <title>班级点名系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
    <div class="particles" id="particles"></div>
    <main class="container glowing-border">
        <h1>🎓 班级点名系统</h1>
        <div id="display" aria-live="polite" role="status">📁 请先导入学生名单</div>
        <div class="button-group">
            <div class="file-input">
                <button type="button" class="secondary" id="importButton">📤 导入名单</button>
                <input type="file" id="fileInput" accept=".txt" hidden>
            </div>
            <button id="startBtn" type="button">🎲 开始点名</button>
            <button id="resetBtn" class="secondary" type="button">🔄 重置</button>
        </div>
        <div class="roll-call-container">
            <ul class="student-list" id="studentList"></ul>
        </div>
    </main>
    <button class="manual-trigger" type="button" onclick="toggleManual()" aria-label="打开帮助手册">❓</button>
    <div class="help-modal" id="helpModal" role="dialog" aria-labelledby="help-header" aria-modal="true">
        <div class="help-header">
            <h2 id="help-header">📘 系统使用手册</h2>
            <!-- 移除了多余的 role="button" 属性 -->
            <button class="secondary" type="button" onclick="toggleManual()" aria-label="关闭帮助手册">× 关闭</button>
        </div>
        <div class="help-content">
            <span class="code">
                <b><i class="fa-solid fa-code"></i></b>
                如需获取项目源码，请访问：
                <a href="https://github.com/dcyyd/class-roll-call-system"
                    target="_blank">https://github.com/dcyyd/class-roll-call-system</a>
            </span>
            <div class="help-section">
                <h3>🎯 核心功能</h3>
                <ul>
                    <li>📥 支持TXT格式名单批量导入</li>
                    <li>🎲 随机滚动点名动画效果</li>
                    <li>📌 自动记录已点名学生状态</li>
                    <li>🔄 一键重置系统状态</li>
                </ul>
            </div>
            <div class="help-section">
                <h3>📋 操作指南</h3>
                <div class="step">
                    <h4>1. 导入名单</h4>
                    <p>点击 <b>📤 导入名单 </b> → 选择TXT文件 → 自动解析</p>
                    <small><b>要求：</b>每行一个姓名，UTF-8编码</small>
                </div>
                <div class="step">
                    <h4>2. 开始点名</h4>
                    <p>点击 <b>🎲 开始点名 </b> → 再次点击停止 → 选中学生高亮显示</p>
                    <small><b>提示：</b>未点名学生会保持灰色状态</small>
                </div>
            </div>
            <div class="help-section">
                <h3>⚙️ 技术规范</h3>
                <ul>
                    <li><b>环境</b>：Chrome 100+/Edge 95+/Firefox 90+</li>
                    <li><b>数据格式</b>：纯文本/TXT</li>
                    <li><b>兼容性</b>：PC/平板/手机端适配</li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer">
            © 2025 <a href="https://dcyyd.github.io">DouCY</a> | 班级点名系统，本项目采用 <a
                href="https://github.com/dcyyd/class-roll-call-system/blob/main/LICENSE">MIT
                License</a> 开源协议
        </div>
    </footer>
    <script src="./assets/js/script.js"></script>
</body>

</html>